<template>
	<div class="page">
		<div class="page-header">
			<div class="header">
				<div class="header-left" @click="back()">
					<i class="icon iconfont icon-left"></i>
				</div>
				<div class="header-center">
					<ul>
						<li :class="[step == 0?'active':'']" @click="selectTab(0)">
							步骤 1
							<span></span>
						</li>
						<li :class="[step == 1?'active':'']" @click="selectTab(1)">
							步骤 2
							<span></span>
						</li>

					</ul>
				</div>
				<div class="header-right" @click="goHome()">
					<i class="icon iconfont icon-home"></i>
				</div>
			</div>
		</div>
		<div class="page-content">
			<section class="section section-1" v-if="step == 0">
				<div class="gift">
					<div class="gift-tip">领取商品：</div>
					<div class="gift-box">
						<div class="gift-box--item">
							<div class="item-left">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
							</div>
							<div class="item-right">
								<div class="gift-desc">60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花</div>
								<div class="gift-info">
									<div class="gift-price">
										<p>￥<i>0</i></p>
										<span>￥6.80 </span>
									</div>
									<div class="gift-num">
										<p>剩余：<span>15</span>余</p>
									</div>
								</div>
								<div class="gift-paynum">2515人已领</div>
							</div>
						</div>
					</div>
				</div>
				<div class="task">
					<div class="task-title">需完成任务：</div>
					<div class="task-content">
						<div class="task-left">
							<div class="task-icon">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
							</div>
						</div>
						<div class="task-right">
							<div class="task-text">360借条 出额度</div>
							<div class="task-info">
								<p>要求：</p>
								<ul>
									<li>新用户</li>
									<li>新用户</li>
								</ul>
							</div>
							<div class="task-btn">
								<i class="icon iconfont icon-sync"></i>
								<span>换一个</span>
							</div>

						</div>

					</div>
				</div>
				<div class="step">
					<div class="step-title">请参照以下步骤完成：</div>
					<div class="step-down">
						<div class="titles">
							<i></i>
							<p>第一步 下载安装</p>
						</div>
						<div class="step-down--content">
							<div class="content">打开网址，领取红包，选择普通下载，不要去跳至商店下载</div>
							<div class="addr">
								<input type="text">
								<span>打开网址</span>
							</div>
						</div>
					</div>

					<div class="step-down step-img">
						<div class="titles">
							<i></i>
							<p>第二步 点击 [ 我要借款 ]</p>
						</div>
						<div class="step-down--content">
							<div class="content">注册登录后点击[我要借款]根据提示操作，只是验证出额度。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">

									</li>

								</ul>
							</div>
						</div>
					</div>
					<div class="step-down step-img">
						<div class="titles">
							<i></i>
							<p>第三步 提交截图 显示可借额度</p>
						</div>
						<div class="step-down--content">
							<div class="content">根据提示操作出额度后，进入主页截图，无需借款。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">

									</li>

									<li>
										<div class="photo">
											<i class="icon iconfont icon-tianjiazhaopian"></i>
											<p>添加图片</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="step-down step-img">
						<div class="titles">
							<i></i>
							<p>第四步 提交截图 短信通知额度</p>
						</div>
						<div class="step-down--content">
							<div class="content">根据提示操作出额度后，进入主页截图，无需借款。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close"></i>
									</li>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close"></i>
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div class="step-down step-phone">
						<div class="titles">
							<i></i>
							<p>第五步 填写信息 手机号码</p>
						</div>
						<div class="step-down--content">
							<div class="content">注册登录后点击[我要借款]根据提示操作，只是验证出额度。</div>
							<div class="phone-box">
								<input type="text">
							</div>
						</div>
					</div>
				</div>
				<div style="height: 10px;"></div>
				<div class="footer">
					<div class="footer-icon">
						<i class="icon iconfont icon-sync"></i>
						<p>换一个</p>
					</div>
					<div class="footer-btn">提交</div>
				</div>

			</section>
			<section class="section section-2" v-if="step == 1">

				<div class="task">
					<div class="task-title">已完成任务：</div>
					<div class="task-content">
						<div class="task-left">
							<div class="task-icon">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
							</div>
						</div>
						<div class="task-right">
							<div class="task-text">360借条 出额度</div>
							<div class="task-info">
								<p>要求：</p>
								<ul>
									<li>新用户</li>
									<li>新用户</li>
								</ul>
							</div>
							<div class="task-btn active">
								<i class="icon iconfont icon-sync"></i>
								<span>已完成</span>
							</div>
						</div>

					</div>
				</div>
				<div class="apply">
					<div class="apply-title">安装应用</div>
					<div class="apply-content">
						<div class="apply-left">
							<div class="apply-icon">
								<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
							</div>
						</div>
						<div class="apply-right">
							<div class="apply-text">360借条 出额度</div>
							<div class="apply-info">
								<p>领取“60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花”：</p>
							</div>

						</div>

					</div>
				</div>
				<div class="step">
					<div class="step-title">请参照以下步骤完成：</div>

					<div class="step-down">
						<div class="titles">
							<i></i>
							<p>第一步 下载安装</p>
						</div>
						<div class="step-down--content">
							<div class="content">打开网址，领取红包，选择普通下载，不要去跳至商店下载</div>
							<div class="addr">
								<input type="text">
								<span>复制</span>
							</div>
						</div>
					</div>
					<div class="step-down step-img">
						<div class="titles">
							<i></i>
							<p>第二步 点击 [ 我要借款 ]</p>
						</div>
						<div class="step-down--content">
							<div class="content">注册登录后点击[我要借款]根据提示操作，只是验证出额度。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close"></i>
									</li>

								</ul>
							</div>
						</div>
					</div>

					<div class="step-down step-save">
						<div class="titles">
							<i></i>
							<p>第三步 提交截图 显示可借额度</p>
						</div>
						<div class="step-down--content">
							<div class="content">根据提示操作出额度后，进入主页截图，无需借款。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close"></i>
									</li>

									<li>
										<div class="photo">
											<i class="icon iconfont icon-baocuntupian"></i>
											<p>保存图片</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="step-down step-img">
						<div class="titles">
							<i></i>
							<p>第四步 提交截图 短信通知额度</p>
						</div>
						<div class="step-down--content">
							<div class="content">根据提示操作出额度后，进入主页截图，无需借款。</div>
							<div class="imgs-box">
								<ul>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close imgs-close"></i>
									</li>
									<li>
										<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
										<i class="icon iconfont icon-close-circle-fill imgs-close imgs-close"></i>
									</li>

								</ul>
							</div>
						</div>
					</div>
					<div class="step-down step-phone">
						<div class="titles">
							<i></i>
							<p>第五步 填写信息 手机号码</p>
						</div>
						<div class="step-down--content">
							<div class="content">注册登录后点击[我要借款]根据提示操作，只是验证出额度。</div>
							<div class="phone-box">
								<input type="text">
							</div>
						</div>
					</div>
				</div>
				<div style="height: 10px;"></div>

				<div class="footer2">
					<div class="footer-btn">提交</div>
				</div>
			</section>

		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Icon,
		NavBar,
		Lazyload,
		Tab,
		Tabs
	} from 'vant';

	Vue.use(Tab);
	Vue.use(Tabs);
	Vue.use(Icon);
	Vue.use(NavBar);
	Vue.use(Lazyload);
	export default {
		components: {

		},
		data() {
			return {
				bannerList: [
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
				],
				current: 0,
				step: 0,
			}
		},

		computed: {

		},
		created() {

		},
		mounted() {

		},

		methods: {
			selectTab(step) {
				this.step = step;
			},
			goHome() {
				this.$router.push('/');
			},
			back() {
				this.$router.back();
			}
		}
	};
</script>

<style lang="less" scoped>
	.page {
		background: #F9F9F9;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.page-header {
		.header {
			background: #EC554E;
			height: 45px;
			width: 375px;
			display: flex;
			align-items: center;

			.header-left {
				padding: 0 18px;
				width: 50px;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				i {
					color: #FFFFFF;
					font-size: 20px;
				}
			}

			.header-center {
				height: 45px;
				width: 255px;
				display: flex;
				align-items: center;
				justify-content: center;

				ul {
					display: flex;

					li {
						margin: 0 5px;
						font-size: 18px;
						color: rgba(255, 255, 255, 0.5);
						position: relative;
						height: 45px;
						display: flex;
						justify-content: center;
						align-items: center;

						span {
							width: 34px;
							height: 3px;
							background: rgba(255, 255, 255, 0.5);
							;
							position: absolute;
							bottom: 0;
							left: calc(50% - 17px);
							display: none;
						}

						&.active {
							color: #FFFFFF;

							span {
								display: block;
							}
						}
					}
				}
			}

			.header-right {
				height: 45px;
				padding: 0 18px;
				width: 50px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				i {
					color: #FFFFFF;
					font-size: 20px;
				}
			}
		}

		.title-tab {
			ul {
				display: flex;

				li {
					font-size: 18px;
					color: #FFFFFF;
					margin: 0 5px;
					position: relative;

					span {
						position: absolute;
						left: calc(50% - 17px);
						width: 34px;
						height: 3px;
						background: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}
	}

	.titles {
		display: flex;
		align-items: center;
		height: 20px;

		i {
			width: 5px;
			height: 14px;
			background: #FF0000;
		}

		p {
			margin-left: 10px;
			font-size: 14px;
			line-height: 18px;
			color: #333333;

		}
	}

	.section {
		.task {
			width: 375px;
			background: #FFFFFF;
			padding-top: 10px;

			.task-title {
				margin-left: 15px;
				font-size: 16px;
				;
				color: #666666;
			}

			.task-content {
				width: 355px;
				height: 58px;
				background: url(../../assets/images/goods/apply_bg.png);
				background-size: 100%;
				margin: 0 auto;
				margin-top: 5px;
				display: flex;

				.task-left {
					width: 52px;

					.task-icon {
						padding-top: 5px;
						margin-left: 5px;
						width: 47px;
						height: 47px;

						img {
							width: 47px;
							height: 47px;
						}
					}
				}

				.task-right {
					width: 303px;
					margin-left: 5px;
					position: relative;

					.task-text {
						font-size: 12px;
						color: #666666;
						margin-top: 10px;
					}

					.task-info {
						display: flex;
						margin-top: 5px;

						p {
							font-size: 9px;
							color: #666666;
						}

						ul {
							display: flex;

							li {
								margin-left: 5px;
								width: 40px;
								height: 18px;
								background: #FFFFFF;
								border: 1px solid #EEEEEE;
								border-radius: 5px;
								font-size: 10px;
								color: #EC554E;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}

					.task-btn {
						width: 80px;
						height: 58px;
						position: absolute;
						right: 0;
						top: 0;
						display: flex;
						align-items: center;
						justify-content: center;

						i {
							font-size: 12px;
							margin-right: 5px;
							color: #EC554E;
						}

						span {
							font-size: 12px;
							color: #EC554E;

						}

						&.active {
							span {
								color: #558B2F;
							}

							i {
								color: #558B2F;
							}
						}
					}
				}

			}
		}

		.apply {
			margin-top: 10px;
			width: 375px;
			background: #FFFFFF;
			padding-top: 10px;

			.apply-title {
				margin-left: 15px;
				font-size: 14px;
				;
				color: #666666;

			}

			.apply-content {
				width: 355px;
				height: 58px;

				margin: 0 auto;
				margin-top: 5px;
				display: flex;

				.apply-left {
					width: 52px;

					.apply-icon {
						padding-top: 5px;
						margin-left: 5px;
						width: 47px;
						height: 47px;

						img {
							width: 47px;
							height: 47px;
						}
					}
				}

				.apply-right {
					width: 303px;
					margin-left: 5px;
					position: relative;

					.apply-text {
						font-size: 12px;
						color: #EC554E;
						margin-top: 10px;

					}

					.apply-info {
						display: flex;
						margin-top: 5px;

						p {
							font-size: 9px;
							color: #666666;
						}

					}

				}

			}
		}

		.gift {
			background: #FFFFFF;
			padding-top: 10px;
			width: 375px;

			.gift-tip {
				margin-left: 15px;
				font-size: 16px;
				;
				color: #666666;

			}

			.gift-box {
				width: 355px;
				display: flex;
				margin: 0 auto;
				margin-top: 5px;

				.gift-box--item {
					display: flex;

					.item-left {
						width: 80px;

						img {
							width: 80px;
							height: 80px;
						}
					}

					.item-right {
						margin-left: 10px;
						width: 265px;

						.gift-desc {
							margin-top: 5px;
							font-size: 12px;
							font-weight: bold;
							color: #666666;
						}

						.gift-info {
							margin-top: 5px;
							display: flex;

							.gift-price {
								width: 50%;
								display: flex;

								p {
									font-size: 12px;
									color: #FF0000;

									i {
										margin-left: 5px;
										font-size: 20px;
										color: #FF0000;
									}
								}

								span {
									display: flex;
									align-items: flex-end;
									margin-left: 10px;
									font-size: 11px;
									color: #EEEEEE;
									text-decoration: line-through;

								}
							}

							.gift-num {
								width: 50%;

								p {
									font-size: 12px;
									color: #FF0000;
									text-align: right;

									span {
										font-size: 20px;
										color: #FF0000;

									}
								}
							}

						}

						.gift-paynum {
							;
							margin-top: 10px;
							font-size: 9px;
							color: #999999;

						}
					}
				}
			}
		}

		.step {
			width: 375px;

			.step-title {
				background: #FFFFFF;
				width: 345px;
				padding: 15px;
			}

			.step-down {

				margin-top: 10px;
				background: #FFFFFF;
				width: 345px;
				padding: 15px;

				.step-down--content {
					.content {
						line-height: 14px;
						width: 312px;
						font-size: 12px;
						color: #666666;
						margin: 0 auto;
						margin-top: 5px;
					}

					.addr {
						width: 312px;

						display: flex;
						justify-content: space-between;
						margin: 0 auto;
						margin-top: 5px;

						input {
							width: 224px;
							height: 15px;
							background: #FFFFFF;
							border: 1px solid #EEEEEE;
							border-radius: 5px;
							padding: 5px;
						}

						span {
							width: 64px;
							height: 25px;
							background: #FC0303;
							border: 1px solid rgba(249, 249, 249, 0.5019607843137255);
							border-radius: 5px;
							font-size: 12px;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.imgs-box {
						width: 312px;
						display: flex;
						justify-content: space-between;
						margin: 0 auto;
						margin-top: 5px;

						ul {
							display: flex;

							li {
								width: 48%;
								position: relative;

								img {
									width: 100%;
								}

								.imgs-close {
									top: 0;
									right: 0;
									position: absolute;
									font-size: 15px;
									color: #FC0303;
								}

								&:nth-child(2n) {
									margin-left: 4%;
									text-align: right;
								}

								&:nth-child(2n+1) {

									text-align: left;
								}

								.photo {
									width: 60px;
									height: 60px;
									background: #FC0303;
									border: 1px solid rgba(249, 249, 249, 0.5019607843137255);
									display: flex;
									justify-content: center;
									align-items: center;
									flex-direction: column;

									i {
										font-size: 25px;
										color: #FFFFFF;
									}

									p {
										margin-top: 2px;
										font-size: 9px;
										color: #FFFFFF;


									}
								}
							}
						}
					}

					.phone-box {
						width: 312px;
						display: flex;
						margin: 0 auto;
						margin-top: 5px;

						input {
							width: 305px;
							height: 15px;
							background: #FFFFFF;
							border: 1px solid #FC0303;
							border-radius: 5px;
							padding: 5px;

						}

					}
				}

			}

			.step-img {}
		}
	}

	.footer2 {
		width: 375px;
		height: 50px;
		background: #FFFFFF;
		position: relative;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;

		.footer-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 222px;
			height: 40px;
			background: #FC0303;
			border-radius: 20px;
			font-size: 16px;
			color: #FFFFFF;
		}
	}

	.footer {
		width: 375px;
		height: 50px;
		background: #FFFFFF;
		position: relative;
		z-index: 9;

		.footer-icon {
			height: 50px;
			width: 132px;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			i {
				color: #999999;
				font-size: 18px;
			}

			p {
				margin-left: 5px;
				font-size: 11px;
				color: #999999;
			}
		}

		.footer-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 222px;
			height: 40px;
			background: #FC0303;
			border-radius: 20px;
			font-size: 16px;
			color: #FFFFFF;
			position: absolute;
			right: 15px;
			top: 5px;
		}
	}

	.section-2 {}
</style>
